<%@ page language="java" contentType="text/html;charset=UTF-8"
   	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type='text/javascript' src='jquery/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {

	function log(event, data, formatted) {
		$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
	}

	function formatItem(row) {
		return row[0] + " (<strong>id: " + row[1] + "</strong>)";
	}
	function formatResult(row) {
		return row[0].replace(/(<.+?>)/gi, '');
	}

	$("#txtusername").focus().autocomplete(["${usernames}"]);

});
</script>
<html>
<form autocomplete="off" name="frmuser" action="add_member.html" method="post">
<table cellpadding="0" cellspacing="0" width="690" align="center" border="0">
	<tr><td colspan="3" align="center" style="color: #333;font-size: 15px;" valign="top">សមាជិកក្រុម  "<c:out value="${groupname}"></c:out>"</td></tr>
	<tr><td colspan="3" height="10"> </td></tr>
	<tr><td colspan="3" height="10"><input type="hidden" name="txtgroupid" id="txtgroupid" value="${groupid}" /></td></tr>
	<c:if test="${curuserid==ownerid}">
		<tr>
			<td colspan="3" height="8" align="left">
			បញ្ចូលឈ្មោះគណនី:&nbsp;<input type="text" id="txtusername" name="txtusername">&nbsp;<input type="submit" class="input_button" value="បញ្ចូលថ្មី" name="btnmember">
			<c:if test="${fn:length(error_msg)>0}">
					<br><br><div style="color: red;"><c:out value="${error_msg}"></c:out></div>
			</c:if>
			</td>
		</tr>
	</c:if>
	
	<c:if test="${fn:length(users)>0}">
	<tr><td colspan="3" height="10"​> </td></tr>
	<tr class="mygroupheader" align="center" >
		<td width="6%"​ height="25">លេខរៀង</td>	
		<td width="30%">សមាជិក</td>		
		<td width="10%">លុបចោល</td>
	</tr>
	<%
		String usercolor="#EEE";
	%>
	<c:forEach var="x" begin="0" end="${fn:length(users)-1}" step="1" varStatus ="status">
		<%
			String fileStatus="";
			usercolor=(usercolor=="#EEE")?"#FFF":"#EEE";
		%>
		<c:if test="${ownerid!=users[x].USER_ID}">
			<tr bgcolor="<%=usercolor%>" align="center">
				<td height="30" style="border-left:solid 1px #DDD; border-bottom:solid 1px #DDD;"><c:out value="${x+1}"/></td>
				<td align="center" style="border-left:solid 1px #DDD; border-bottom:solid 1px #DDD;">&nbsp;<c:out value="${users[x].USER_NAME}"/><span style="color: #444;font-size: 9px;">&nbsp;&nbsp;<%=fileStatus%></span></td>
				<td style="border:solid 1px #DDD; border-top:solid 0px #DDD;">
					<img src="images/remove.png" width="16" height="16" onclick="deleteMember(${groupid},${users[x].USER_ID})" style="cursor: pointer;">
				</td>
			</tr>
		</c:if>	
		<c:if test="${ownerid==users[x].USER_ID}">
			<tr bgcolor="<%=usercolor%>" align="center">
				<td height="30" style="border-left:solid 1px #DDD; border-bottom:solid 1px #DDD;"><c:out value="${x+1}"/></td>
				<td align="center" style="border-left:solid 1px #DDD; border-bottom:solid 1px #DDD;"><b><c:out value="${users[x].USER_NAME}"/></b><span style="color: #444;font-size: 9px;">&nbsp;&nbsp;<b>(Owner)</b></span></td>
				<td style="border:solid 1px #DDD; border-top:solid 0px #DDD;">
				</td>
			</tr>
		</c:if>	
	</c:forEach>
	</c:if>
	<tr><td colspan="3" height="15"> </td></tr>
	<tr><td colspan="3" height="10" align="center"><a href="sharing_groups.html">ត្រលប់ទៅកាន់ទំព័រក្រុមរបស់ខ្ញុំ</a></td></tr>
</table>
</form >
<br><br>
</html>